<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Site Amadeus France</title>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
        <!-- The JavaScript -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <link rel="stylesheet" href="css/style2.css" type="text/css" media="screen"/>
        
    </head>
    <body>
        <div class="content" >
            <h1>Site Amadeus France</h1>
        </div>
		<div>
			<ul class="topnav">	
				<li>
					<a>Environnement</a>
					<ul class="subnav">
						<li><a >Local</a></li>
						<li><a >Integration</a></li>
						<li><a >Pré-Production</a></li>
						<li><a >Production</a></li>
					</ul>
				</li>
				<li>
					<a >Agence de voyages</a>
					<ul class="subnav">
						<li><a >Afat voyages</a></li>
						<li><a >Afat voyages Pro</a></li>
						<li><a >Selectour</a></li>
						<li><a >Selectour Pro</a></li>
						<li><a >Carrefour voyages</a></li>
					</ul>
				</li>
				<li>
					<a >Site</a>
					<ul class="subnav">
	                    <li><a >Front Office</a></li>
	                    <li><a >Cardibox</a></li>
	                    <li><a >Eretail Manager</a></li>
	                    <li><a >WebService</a></li>
					</ul>
				</li>
				<li>
					<a>Flux</a>
					<ul class="subnav">
	                    <li><a>MixDisplay</a></li>
	                    <li><a>Air</a></li>
	                    <li><a>rail</a></li>
	                    <li><a>Hotel</a></li>
	                    <li><a>Véhicule</a></li>
	                    <li><a>AirHotel</a></li>
	                    <li><a>RailAirHotel</a></li>
					</ul>	
				</li>
				<li>
					<a>OFFICE_ID</a>
					<ul class="subnav">
	                    <li><a>TLSFT28AA</a></li>
					</ul>
				</li>
			</ul>
			<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$(".subnav").parent().append("<span></span>"); //Affiche simplement le bouton (ici représenté par une flèche) qui sert à afficher le menu déroulant lorsque le JavaScript est activé.
					$(".topnav li span").click(function() { //Lorsque l'on clique sur le bouton (flèche)...

					//Les événements suivants sont appliqués à la sous-navigation (menu déroulant).
					$(this).parent().find("ul.subnav").slideDown('fast').show(); //Ouverture du menu déroulant lorsque l'on clique sur le bouton

					$(this).parent().hover(function() {
					}, function(){
						$(this).parent().find("ul.subnav").slideUp('slow'); //Lorsque l'on survol à l'extérieur du menu déroulé, le menu déroulant remontra
					});

					// Les événements suivant s'appliquent lors du survol du bouton de la flèche.
					}).hover(function() {
						$(this).addClass("subhover"); // Lorsque l on survol, ajout de la classe "subhover"
					}, function(){	//On Hover Out
						$(this).removeClass("subhover"); // Lorsque l on survol à l'extérieur, enlève la classe "subhover"
						});
					
					$(".subnav li a").click(function() { //Lorsque l'on clique sur le bouton (flèche)...
						copyValue(this);
					});
				});
				
				function copyValue(element){
					var parent = $(element).parent().parent().parent();
					$(parent).find("a").first().html($(element).html());
				}
			</script>
		</div>
    </body>
</html>